{% extends "view/center/mobile/inc/appbase.html" %}
{%block style%}
<style>
    .mui-table h4,
    .mui-media-body h4 {
        line-height: 21px;
        font-weight: 400;
    }

    .price {
        color: #e4393c;
        font-size: 16px;
    }

    .mui-table h4,
    .mui-media-body h4 {
        line-height: 21px;
        font-weight: 400;
    }
</style>
{%endblock%}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">{{controller.meta_title}}</h1>
</header>
<div class="mui-content">
    <form method="post" class="form-recharge">
        <div class="mui-card">

            <ul class="mui-table-view ">
                {% if orderType === 0 %}
                <li class="mui-table-view-divider">支付信息</li>
                <li class="mui-table-view-cell">订单编号:{{order.order_no}}</li>
                <li class="mui-table-view-cell"> 订单金额:<span class="price">￥{{order.order_amount|formatCurrency}}</span>
                </li>
                {% elseif orderType === 1 %}
                <li class="mui-table-view-divider">充值金额</li>
                <div class="mui-input-row padding-10">
                    <input type="number" placeholder="输入充值金额" name="order_amount" min="0.01">
                </div>
                {% endif %}
                <li class="mui-table-view-divider">支付方式</li>
                {% for val in payList %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio" value="{{val.id}}" {% if val.id== order.payment %} checked
                        {% endif%}>

                    <div class="mui-media-object mui-pull-left"><img src="{{val.logo_url}}"> </span>
                    </div>
                    <div class="mui-media-body">
                        {{val.title}}
                    </div>
                </li>
                {% endfor %}
                {% if controller.setup.PREPAID == 0 and order.type === 0 %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio" value="100" {% if paylist|length == 0  or 100== order.payment %}
                        checked {% endif%}>
                    <div class="mui-media-object mui-pull-left"><img src="/static/admin/img/pingxx/yfk.png"> </span>
                    </div>
                    <div class="mui-media-body">
                        预付款支付
                    </div>
                </li>
                {% endif %}
                {% if controller.setup.COD == 0 and order.type === 0 %}
                <li class="mui-table-view-cell mui-radio mui-left mui-media mui-media-icon">
                    <input name="payment" type="radio" value="1001"
                        {% if (paylist|length == 0 and controller.setup.PREPAID == 1) or 1001== order.payment %} checked
                        {% endif%}>
                    <div class="mui-media-object mui-pull-left"><img src="/static/admin/img/pingxx/hdfk.png"> </span>
                    </div>
                    <div class="mui-media-body">
                        货到付款
                    </div>
                </li>
                {% endif %}
            </ul>
        </div>
        <div class="mui-content-padded" style="margin-top: 20px; margin-bottom: 50px">
            <input type="hidden" value="{{order.id}}" name="order_id">
            <button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="pay">下一步</button>
        </div>
    </form>
</div>

{% endblock%}

{% block script %}
{% if payType === 0 %}
<script>
    var falg = false;
    $("#pay").on("tap", function () {
        if (falg) {
            return false;
        }
        var order_amount = $("input[name='order_amount']").val();
        var payment = $("input[name='payment']:checked").val();
        if (payment === undefined) {
            mui.toast("请选择一种支付方式");
            return;
        }
        var that = this;
        $(that).addClass('disabled').attr('autocomplete', 'off').prop('disabled', true);
        falg = true;
        mui.post("/center/account/recharge", { order_amount: order_amount, payment: payment }, function (data) {
            if (data.errno != 1000) {
                if (data.data.url) {
                    mui.toast(data.data.name + ' 即将跳转~');
                } else if (data.data.data) {
                    mui.toast(data.data.name);
                    mui.openWindow({ url: data.data.data.url });
                }
                setTimeout(function () {
                    $(that).removeClass('disabled').prop('disabled', false);
                    falg = false;
                    if (data.data.url) {
                        mui.openWindow({ url: data.data.url })
                    }
                }, 1500);
            } else {
                mui.toast(data.errmsg);
                setTimeout(function () {
                    $(that).removeClass('disabled').prop('disabled', false);
                    falg = false;
                    if (data.data) {
                        mui.openWindow({ url: data.data });
                    }
                }, 1500);
            }
        }, 'json');
        return;
    });
</script>
{% else %}
<script>
    $("#pay").on("tap", function () {
        var orderId = $('input[name="order_id"]').val();
        var payment = $("input[name='payment']:checked").val();
        if(payment===undefined){
            mui.toast("请选择一种支付方式");
            return;
        }
        mui.openWindow({ url: '/pay/' + orderId + '/' + payment });
    });
</script>
{% endif %}
{% endblock %}